<template>
  <view class="layout">
    <view class="navBar">
      <view class="statusBar" :style="{height: statusBarHeight + 'px'}"></view>
      <view class="titleBar f fac" :style="{height: titleBarHeight + 'px'}">
        <view class="title">{{title}}</view>
        <view class="search f fac">
          <uni-icons type="search" color="#888" size="18"></uni-icons>
          <text class="text">搜索</text>
        </view>
      </view>
    </view>
    
    <!-- 占位符,不然导航栏会占据页面元素的内容 -->
    <view class="fill" :style="{height: navBarHeight + 'px'}"></view>
  </view>
</template>

<script setup>
import { ref } from "vue"
import { getStatusBarHeight, getTitleBarHeight, getNavBarHeight } from "@/utils/system.js"

defineProps({
  title: {
    type: String,
    default: ''
  }
})

let statusBarHeight = ref(getStatusBarHeight())
let titleBarHeight = ref(getTitleBarHeight())
let navBarHeight = getNavBarHeight()
</script>

<style lang="scss">
.layout {
  .navBar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background:
    linear-gradient(to bottom, transparent, #fff 400rpx),
    linear-gradient(to right, #beecd8, #f4e2d8);
    .statusBar {
      
    }
    .titleBar {
      padding: 0 30rpx;
      .title {
        color: $text-font-color-1;
        font-size: 45rpx;
        font-weight: 700;
      }
      .search {
        width: 220rpx;
        height: 50rpx;
        margin-left: 30rpx;
        border-radius: 50rpx;
        padding: 0 20rpx;
        font-size: 28rpx;
        background-color: rgba(255, 255, 255, 0.7);
        border: 1px solid #fff;
        color: #999;
        .text {
          margin-left: 12rpx;
        }
      }
    }
  }
}
</style>